<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">{{ $t('orderrefunds.detail.5j5by1') }}</text>
			</template>
		</cu-custom>
		<view>
			<view class="cu-card case">
				<view class="padding-left padding-right padding-top bg-white solid-top">
					<view class="flex justify-between align-center">
						<navigator :url="'../order/detail?id=' + orderItemObj.orderId" class="text-darkgrey">
							<text class="text-sm cuIcon-titles">{{ $t('orderrefunds.detail.mvc086') }}{{ orderNo }}</text>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="case bg-white padding-top-xs padding-left padding-right padding-bottom">
				<view class="flex justify-between align-center">
					<view class="cu-avatar img-box" :style="{ 'background-image': orderItemObj.picUrl ? 'url(' + orderItemObj.picUrl + ')' : '' }"></view>
					<view class="content flex-sub padding-left padding-right text-sm">
						<view class="text-darkgrey text-to-long">{{ orderItemObj.spuName }}</view>
						<view class="text-purple-grey flex justify-between margin-top-xs">
							<text>{{ $t('goodsappraises.list.5n08pj') }}{{ orderItemObj.specInfo ? orderItemObj.specInfo : $t('order.detail.44038b') }}</text>
							<text>x{{ orderItemObj.quantity }}</text>
						</view>
						<view class="margin-top-xs flex justify-between">
							<view class="text-darkgrey">
								{{ $t('order.detail.287ftg') }}
								<text class="text-red text-xl text-bold text-price">{{ orderItemObj.paymentPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="padding-tb-xs">
					<view>
						{{ $t('coupon.counponinfo-detail.o7ddt5') }}
						<text class="text-price text-red margin-right-xs">{{ orderItemObj.quantity * orderItemObj.salesPrice }}</text>
					</view>
					<view>
						{{ $t('order.detail.ekr37y') }}
						<text class="text-price text-red margin-right-xs">{{ orderItemObj.freightPrice }}</text>
					</view>
					<view>
						{{ $t('orderrefunds.detail.6ppls6') }}
						<text class="text-price text-red margin-right-xs">{{ orderItemObj.paymentPoints }}</text>
					</view>
					<view class="margin-bottom-xs">
						{{ $t('orderrefunds.detail.gnfhl6') }}
						<text :class="orderItemObj.isRefund == '1' ? 'text-green' : 'text-red'">
							{{ orderItemObj.isRefund == '1' ? $t('bargain.bargaininfo.377y1j') : $t('bargain.bargaininfo.50h7q2') }}
						</text>
						<text class="text-xs text-purple-grey margin-left-xs">{{ $t('orderrefunds.detail.tyfn6q') }}</text>
					</view>
				</view>
			</view>
			<view class="margin-top-xs bg-white">
				<view v-for="(item, index) in listOrderRefunds" :key="index" class="bg-white solids-bottom padding-lr-xs padding-tb-sm">
					<view class="flex justify-between align-center">
						<view>
							<text class="cuIcon-titles"></text>
							退款记录
						</view>
						<view class="text-xs cu-tag light bg-orange round">{{ item.statusDesc }}</view>
					</view>
					<view class="padding-lr">
						<view class="text-red margin-bottom-xs">
							{{ $t('orderrefunds.detail.gmlnc2') }}
							<text class="text-price text-red margin-right-xs">{{ item.refundAmount }}</text>
						</view>
						<view class="text-purple-grey margin-bottom-xs">
							{{ $t('orderrefunds.detail.xo7ypc') }}
							<text class="">{{ item.refundReson }}</text>
						</view>
						<view class="text-df text-black">
							<view class="text-purple-grey">{{ $t('orderrefunds.detail.6r15go') }}{{ item.refundTradeNo || '-' }}</view>
						</view>
						<view class="text-purple-grey flex justify-end text-sm">{{ item.createTime }}</view>
						<!-- 只有最新的一条记录才能操作,避免重复操作 -->
						<view v-if="globalData.permissions['mall:orderrefunds:edit'] && index == 0">
							<view v-if="item.status == '1'" class="text-sm flex justify-end padding-top-xs">
								<view class="cu-btn round bg-blue shadow-blur margin-right-sm button-bg" @tap="orderRefundsConfirm(item, '11')">
									{{ $t('orderrefunds.detail.3528oe') }}
								</view>
								<view class="cu-btn round bg-blue shadow-blur button-bg" @tap="orderRefundsConfirm(item, '12')">
									{{ $t('orderrefunds.detail.3h24u6') }}
								</view>
							</view>
							<view v-else-if="item.status == '2'" class="text-sm flex justify-end padding-top-sm">
								<view class="cu-btn round bg-blue sm margin-right-sm" @tap="orderRefundsConfirm(item, '21')">{{ $t('orderrefunds.detail.eo2pld') }}</view>
								<view class="cu-btn round bg-blue sm" @tap="orderRefundsConfirm(item, '22')">{{ $t('orderrefunds.detail.97715q') }}</view>
							</view>
							<view v-else-if="item.status == '21'" class="text-sm padding-top-sm flex justify-end">
								<view class="cu-btn round bg-blue sm margin-right-sm" @tap="orderRefundsConfirm(item, '211')">{{ $t('orderrefunds.detail.73hiho') }}</view>
								<view class="cu-btn round bg-blue sm" @tap="orderRefundsConfirm(item, '212')">{{ $t('orderrefunds.detail.5invb8') }}</view>
							</view>
						</view>
					</view>
					<!-- 退货收件信息填写 -->
					<view v-if="item.receiveInfo" class="padding-lr-sm text-grey">
						<text>
							<text class="cuIcon-deliver margin-right-xs"></text>
							退货信息
						</text>
						<view class="padding-left">
							<view class="flex align-center margin-top-xs">
								<view>商家收件人:</view>
								<view class="flex-sub text-right">
									{{ item.receiveInfo.nickName || '-' }}
								</view>
							</view>
							<view class="flex align-center margin-top-xs">
								<view>收件电话:</view>
								<view class="flex-sub text-right">
									{{ item.receiveInfo.phone || '-' }}
								</view>
							</view>
							<view class="flex align-center margin-top-xs">
								<view>收件地址:</view>
								<view class="flex-sub text-right">
									{{ item.receiveInfo.address || '-' }}
								</view>
							</view>
							<view class="flex align-center margin-top-xs">
								<view>收件快递:</view>
								<view class="flex-sub text-right">
									{{ getLogisticsName(item.logisticsCode) }}
								</view>
							</view>
							<view class="flex align-center margin-top-xs">
								<view>快递单号:</view>
								<view class="flex-sub text-right">
									{{ item.logisticsNo || '-' }}
									<text v-if="item.logisticsNo" @click="showLogisticsInfo(item)" class="cu-btn sm radius margin-left-xs">查询</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 退款确认弹框 -->
			<view class="cu-modal" :class="showModal ? 'show' : ''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">退款确认</view>
						<view class="action" @tap="showModal = false">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="bg-white">
						<view v-if="orderRefundsStatus == '12' || orderRefundsStatus == '22' || orderRefundsStatus == '212'" class="flex align-center padding solid-bottom">
							<view>退款原因:</view>
							<view class="flex-sub text-left padding-left">
								<input :placeholder="$t('orderrefunds.detail.5cu186')" type="text" name="refuseRefundReson" v-model="orderRefunds.refuseRefundReson" />
							</view>
						</view>
						<view v-else>
							<view class="flex align-center padding solid-bottom">
								<view>退款金额:</view>
								<view class="flex-sub text-left padding-left">
									<input placeholder="退款金额" type="digit" @input="inputAmountChange" v-model="orderRefunds.refundAmount" />
								</view>
							</view>
							<view class="text-left padding-lr margin-top-xs text-gray">
								<text class="cuIcon-info margin-right-xs"></text>
								退款金额不能超过支付金额: ¥ {{ orderItemObj.paymentPrice }}
							</view>
						</view>
						<!-- 退货收件信息填写 -->
						<view v-if="orderRefundsStatus == '21' || orderRefundsStatus == '211'" class="bg-white solid-bottom padding-top">
							<view class="text-center text-blue">
								<text class="cuIcon-deliver margin-right-xs"></text>
								退货地址
							</view>
							<view class="flex align-center padding solid-bottom">
								<view>商家收件人:</view>
								<view class="flex-sub text-right">
									<input class="text-right" placeholder="商家收件人" v-model="orderRefunds.receiveInfo.nickName" />
								</view>
							</view>
							<view class="flex align-center padding solid-bottom">
								<view>收件电话:</view>
								<view class="flex-sub text-right">
									<input class="text-right" placeholder="收件电话" v-model="orderRefunds.receiveInfo.phone" />
								</view>
							</view>
							<view class="flex align-center padding solid-bottom">
								<view>收件地址:</view>
								<view class="flex-sub text-right">
									<input class="text-right" placeholder="收件地址" v-model="orderRefunds.receiveInfo.address" />
								</view>
							</view>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="showModal = false">{{ $t('login.login.5csq28') }}</button>
							<button class="cu-btn bg-green margin-left" @tap="orderRefundsSubmit">{{ $t('goodsappraises.list.6to1i8') }}</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 物流信息查询弹框 -->
		<view class="cu-modal" :class="logisticsInfo.dialog ? 'show' : ''">
			<view class="cu-dialog" style="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">物流信息</view>
					<view class="action" @tap="logisticsInfo.dialog = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="flex align-center justify-between padding-sm">
					<view class="text-left">
						<view>更新时间: {{ logisticsInfo.updateTime }}</view>
						<!-- <view>快递公司: {{ logisticsInfo.params.com }}</view> -->
						<!-- <view>快递单号: {{ logisticsInfo.params.num }}</view> -->
					</view>
					<button :disabled="logisticsInfo.loading" class="cu-btn sm radius" @click="refreshLogisticsInfoData">
						<text class="cuIcon-refresh margin-right-xs"></text>
						刷新
					</button>
				</view>
				<view v-if="!logisticsInfo.data.data || logisticsInfo.data.data.length == 0" class="padding text-gray solid-top">暂无物流信息</view>
				<view style="overflow-y: auto; max-height: 70vh">
					<view class="cu-timeline text-sm Logistics-information" v-for="(item, index) in logisticsInfo.data.data" :key="index">
						<view :class="'cu-item ' + (index == 0 ? 'text-red cuIcon-roundcheckfill text-xl' : '')">
							<view class="text-left" :class="' bg-white text-sm' + (index == 0 ? 'bg-red' : '')">
								<view class="logisticsTime">
									<view class="text-grey text-sm">{{ item.time }}</view>
								</view>
								<view class="logisticsAddress">{{ item.context }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getPage, getObj, addObj, putObj, doOrderRefunds } from '@/api/mall/orderrefunds';
import { getObj as getOrderItem } from '@/api/mall/orderitem';
import { getObj as getShopInfo } from '@/api/mall/shopinfo';
import { getObj as getObjSupplier } from '@/api/mall/supplier';
import { getLogisticsInfo } from '@/api/mall/logistics';
import { dicSelect } from './util.js';

export default {
	onLoad(e) {
		if (e) {
			if (e.orderItemId) {
				this.orderItemId = e.orderItemId;
				this.getOrderItem();
			}
			if (e.orderNo) {
				this.orderNo = e.orderNo;
			}
		}
	},
	data() {
		return {
			globalData: getApp().globalData,
			CustomBar: this.CustomBar,
			id: null,
			orderItemId: null,
			orderItemObj: {},
			orderRefunds: {
				id: '',
				status: '',
				refundAmount: 0,
				refuseRefundReson: '',
				receiveInfo: {
					//退货收件人信息
					nickName: '',
					phone: '',
					address: ''
				}
			},
			orderNo: null,
			data: {
				orderInfo: {}
			},
			showModal: false,
			refuseRefundReson: '', //拒绝原因
			editPriceForm: {
				id: null,
				paymentPrice: 0
			},
			listOrderRefunds: [], //退款所有操作记录
			orderRefundsStatus: '', //操作的退款状态
			refuseRefundAmount: 0, //退款金额
			orderlogistics: dicSelect, //快递公司
			logisticsInfo: {
				dialog: false,
				loading: false,
				data: {},
				updateTime: '',
				params: {}
			}
		};
	},
	methods: {
		orderRefundsSubmit() {
			if (this.orderRefundsStatus == '12' || this.orderRefundsStatus == '22' || this.orderRefundsStatus == '212') {
				// 拒绝
				if (!this.orderRefunds.refuseRefundReson) {
					// 拒绝原因
					uni.showToast({
						title: this.$t('orderrefunds.detail.3293y5'),
						icon: 'none'
					});
					return;
				}
			} else {
				if (this.orderRefundsStatus == '21') {
					// 等待退货必须填写收件信息
					if (!this.orderRefunds.receiveInfo.nickName) {
						uni.showToast({
							title: '商家收件人 不能为空',
							icon: 'none'
						});
						return;
					}
					if (!this.orderRefunds.receiveInfo.phone) {
						uni.showToast({
							title: '收件电话 不能为空',
							icon: 'none'
						});
						return;
					}
					if (!this.orderRefunds.receiveInfo.address) {
						uni.showToast({
							title: '收件地址 不能为空',
							icon: 'none'
						});
						return;
					}
				}
				// 同意
				if (this.orderRefunds.refundAmount > Number(this.orderItemObj.paymentPrice)) {
					// 拒绝原因
					uni.showToast({
						title: '退款金额不能超过支付金额!',
						icon: 'none'
					});
					return;
				}
			}
			this.orderRefunds.status = this.orderRefundsStatus;
			doOrderRefunds(this.orderRefunds)
				.then((res) => {
					this.showModal = false;
					uni.showToast({
						title: this.$t('bargain.bargaininfo.f46253')
					});
					uni.navigateBack();
				})
				.catch(() => {
					this.showModal = false;
					this.getOrderItem();
				});
		},
		getOrderItem() {
			getOrderItem(this.orderItemId).then((response) => {
				if (response.data) {
					this.orderItemObj = response.data;
					this.listOrderRefunds = this.orderItemObj.listOrderRefunds;
					this.orderRefunds = this.orderItemObj.listOrderRefunds[0];
					this.refuseRefundAmount = this.orderItemObj.listOrderRefunds[0].refundAmount;
					this.orderRefundsChange();
				}
			});
		},
		// 退款信息确认
		orderRefundsConfirm(item, status) {
			this.orderRefundsStatus = status;
			this.showModal = true;
		},
		// 获取店铺联系方式自动填入退货收件数据中
		orderRefundsChange() {
			if (!this.orderRefunds.receiveInfo.phone) {
				if (this.orderItemObj.supplierId) {
					// 表示是供应商发货,退回到
					//请求店铺信息获取店铺联系方式
					getObjSupplier(this.orderItemObj.supplierId).then((response) => {
						this.orderRefunds.receiveInfo.phone = response.data.phone;
						this.orderRefunds.receiveInfo.nickName = response.data.name;
						this.orderRefunds.receiveInfo.address = response.data.address;
					});
				} else {
					//请求店铺信息获取店铺联系方式
					getShopInfo(this.orderItemObj.shopId).then((response) => {
						this.orderRefunds.receiveInfo.phone = response.data.phone;
						this.orderRefunds.receiveInfo.nickName = response.data.name;
						this.orderRefunds.receiveInfo.address = response.data.address;
					});
				}
			}
		},
		// 根据code找到logisticsDic 的name
		getLogisticsName(code) {
			let name = '-';
			if (code) {
				this.orderlogistics.forEach((item) => {
					if (item.code == code) {
						name = item.name;
					}
				});
			}
			return name;
		},
		// 手动输入金额时格式化小数点2位,并且不能小于0
		inputAmountChange(e) {
			let value = e.detail.value;
			if (value && value < 0) {
				value = 0;
			}
			if (value > Number(this.orderItemObj.paymentPrice)) {
				value = Number(this.orderItemObj.paymentPrice);
			}
			if (value || value == 0) {
				value = Number(value);
				this.$nextTick(() => {
					this.orderRefunds.refundAmount = parseFloat(value.toFixed(2));
				});
			}
		},
		showLogisticsInfo(row) {
			let num = row.logisticsNo;
			let com = row.logisticsCode;
			if (!num) return;
			// let num = "YT7467491971543";
			// let com = "yuantong";
			let logisticsInfo = uni.getStorageSync(com + num);
			this.logisticsInfo.params = {
				phone: row.receiveInfo.phone,
				com: com,
				num: num
			};
			if (logisticsInfo) {
				// 如果缓存时间超过30分钟就刷新数据
				if (new Date().getTime() - logisticsInfo.time > 30 * 60 * 1000) {
					this.refreshLogisticsInfoData();
				} else {
					// 否则使用缓存数据
					this.logisticsInfo.data = logisticsInfo.data;
					this.logisticsInfo.updateTime = this.$moment(logisticsInfo.time).format('YYYY-MM-DD HH:mm:ss');
					this.logisticsInfo.dialog = true;
				}
			} else {
				this.refreshLogisticsInfoData();
			}
			this.logisticsInfo.dialog = true;
		},
		// 刷新请求快递100的物流信息
		refreshLogisticsInfoData() {
			this.logisticsInfo.loading = true;
			getLogisticsInfo(this.logisticsInfo.params)
				.then((response) => {
					if (response.data && response.data.body) {
						try {
							this.logisticsInfo.data = JSON.parse(response.data.body);
						} catch (e) {
							this.logisticsInfo.data = {};
						}
					}
					if (this.logisticsInfo.data.message == 'ok') {
						// 缓存物流信息30分钟
						uni.setStorageSync(this.logisticsInfo.params.com + this.logisticsInfo.params.num, {
							data: this.logisticsInfo.data,
							time: new Date().getTime()
						});
						this.logisticsInfo.updateTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
						this.logisticsInfo.dialog = true;
					} else {
						uni.showToast({
							title: this.logisticsInfo.data.message,
							icon: 'error'
						});
					}
					this.logisticsInfo.loading = false;
				})
				.catch(() => {
					this.logisticsInfo.loading = false;
				});
		}
	}
};
</script>

<style>
.img-box {
	width: 200rpx !important;
	height: 200rpx !important;
}

.button-bg {
	padding: 20rpx 40rpx 20rpx 40rpx;
}
</style>
